  <template>
  <el-dialog
    title="新增账户"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :show-close="false"
    width="30%"
  >
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="account"
      class="form-box"
      label-width="100px"
    >
      <el-form-item label="请选择角色" prop="role">
        <el-select
          @change="selectChange"
          v-model="account.role"
          placeholder="请选择角色"
        >
          <el-option
            v-for="option in options"
            :label="option.role"
            :value="option"
            :key="option.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请输入账号" prop="username">
        <el-input
          v-model="account.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closedialog')">取消</el-button>
      <el-button @click="handleAdd" type="primary" :loading="loading"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>
</template>
<script  lang='ts'>
import {
  Component,
  Vue,
  Provide,
  Watch,
  Prop,
  Emit,
} from 'vue-property-decorator'
import { addUser } from '@/api/user'
@Component({ components: {} })
export default class AddAccount extends Vue {
  // 获取父组件传过来的值
  @Prop(Boolean) dialogVisible!: boolean
  @Prop(Array) options!: any
  @Provide() loading: boolean = false
  @Provide() account: object = {
    key: '',
    role: '',
    username: '',
    des: '',
  }
  @Provide() rules: any = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  }
  // 选择角色内容
  selectChange(select: any) {
    let _this = this as any
    _this.account.key = select.key
    _this.account.role = select.role
    _this.account.des = select.des
  }
  @Emit('closedialog')
  handleAdd() {
    let _this = this as any
    _this.$refs['ruleForm'].validate((valid: boolean) => {
      if (valid) {
        this.loading = true
        addUser(this.account)
          .then((res: any) => {
            this.loading = false

            console.log(res)
            this.$emit('update')
            _this.$message({
              message: res.data.msg,
              type: 'success',
            })
          })
          .catch((err: any) => {
            this.loading = false
            _this.$message.error(err)
          })
      }
    })
  }
}
</script>
 <style  lang='scss' scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>